<template>
  <page-meta :root-font-size="rootFontSize() + 'px'"> </page-meta>

  <view class="page-container" v-show="delayShow">
    <customHeader title="预习单词" />

    <view class="words-container" :style="{ top: height }">
      <view class="words-wrapper">
        <view class="words-row" v-for="item in preview" :key="item.preview_id">
          <loudspeaker class="words-loudspeaker" :voice="item.us_voice"></loudspeaker>
          <view class="words-line">
            <text class="word">{{ item.word }}</text>
            <text class="desc">{{ item.translate }}</text>
          </view>
        </view>
        <view class="words-liner"></view>
      </view>

      <view class="words-operate">
        <button class="operate operate-prev" @click="handleToDialogueText(true)">跳过预习</button>
        <button class="operate operate-next" @click="handleToDialogueText(false)">进入预习</button>
      </view>
    </view>
  </view>

  <CwCommon />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { rootFontSize } from "@/utils/util";
import customHeader from "@/components/customHeader.vue";
import loudspeaker from "@/components/loudspeaker.vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import API from "@/api";
import type { IPreview, IDialogueLesson } from "@/pages/lowPricedCourse/dialogueOriginText/index";
import { useDelayShow } from "@/hooks/useDelayShow";

const { delayShow } = useDelayShow();
const height = ref(getApp().globalData!.pageTop);

const section_id = ref("");
const courseStep = ref(0);
const preview = ref<IPreview[]>([]);
const pageData = ref<IDialogueLesson>();

onLoad(async (option: any) => {
  section_id.value = option.section_id;
  courseStep.value = Number(option.courseStep);

  if (option.data) {
    const result: IDialogueLesson = JSON.parse(decodeURIComponent(option.data));

    pageData.value = result;
    preview.value = result.data.questions.preview;
  }
});

const handleToDialogueText = (isSkip: boolean) => {
  if (isSkip) {
    // 如果跳过，上传数据并设置完成
    API.skipPreview({ section_id: section_id.value })
      .then(() => {
        pageData.value!.data.isPreview = false;
        pageData.value?.data.questions.preview.forEach((item: IPreview) => {
          item.is_comp = 1;
        });
        toDialogueTextPage();
      })
      .catch((err) => { });
  } else {
    pageData.value!.data.isPreview = true;
    toDialogueTextPage();
  }
};

const toDialogueTextPage = () => {
  uni.redirectTo({
    url: `/pages/lowPricedCourse/dialogueOriginText/dialogueText/index?section_id=${section_id.value}&courseStep=${courseStep.value}&data=${encodeURIComponent(JSON.stringify(pageData.value))}`,
  });
};
</script>

<style scoped lang="scss">
.page-container {
  width: 100vw;
  height: 100vh;
  background-color: $uni-bg-color-minor;

  .words-container {
    position: absolute;
    width: 37.5rem;
    top: 10rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: $uni-bg-color-minor;

    .words-wrapper {
      width: 100%;
      height: 100%;
      overflow: auto;

      .words-row {
        display: flex;
        align-items: center;
        padding: 0.9rem 2rem 1rem;
        margin: 0.8rem 1.6rem;
        border-radius: 1.5rem;
        border: 2px solid #d8ab60;
        background-color: #ffffff;

        .words-loudspeaker {
          width: 2.1rem;
          height: 2.1rem;
          margin-right: 1.7rem;
        }

        .words-line {
          flex: 1;
          display: flex;
          flex-direction: column;

          .word {
            font-size: 2rem;
            font-family: baloo;
            color: $uni-text-color;
          }

          .desc {
            margin-top: -0.5rem;
            font-size: 1.2rem;
            font-family: xiaolai;
            color: $uni-text-color;
          }
        }
      }

      .words-liner {
        height: 15rem;
      }
    }

    .words-operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      bottom: 4.7rem;
      left: 3.7rem;
      right: 3.7rem;

      .operate {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 13rem;
        height: 5rem;
        margin: 0;
        font-family: xiaolai;
        font-size: 1.7rem;
        border-radius: 1rem;
        color: $uni-text-color;
        border: 2px solid $uni-btn-border;
      }

      .is-hover {
        color: rgba(255, 255, 255, 0.6);
      }

      .operate-prev {
        background-color: $uni-btn-minor;
      }

      .operate-next {
        background-color: $uni-btn-prime;
      }
    }
  }
}
</style>